import { merge } from 'lodash-es';
import store from '@/store/index.js';
let sideTheme = store.state.global.setting.sideTheme ?? 'theme-dark';
const options = {
  color: [
    '#01b7fc',
    '#e0e901',
    '#1fd2ba',
    '#fd767e',
    '#238c5c',
    '#0bee91',
    '#138c44',
    '#f9ff06',
    '#ed1b48',
    '#8cc63f',
    '#0000ff',
    '#9b0094',
    '#15e532',
    '#ff6700',
    '#cd70e0',
    '#4657f2',
  ],
  legend: {
    show: false,
    x: '50%', //水平位置，【left\center\right\数字】
    y: 'center', //垂直位置，【top\center\bottom\数字】
    align: 'left', //字在图例的左边或右边【left/right】
    orient: 'vertical', //图例方向【horizontal/vertical】
    itemWidth: 8,
    itemHeight: 8,
  },
  tooltip: {
    show: true,
    trigger: 'item',
    borderWidth: '0', //边框宽度设置1
    shadowStyle: { color: 'rgba(220, 220, 220, 0.1)' },
    confine: true,
    enterable: false,
    formatter: params => `${params.name}: ${params.value} (${params.percent}%)`,
    // position: ['60%', '20%'],
  },
  series: [
    {
      type: 'pie',
      label: {
        overflow: 'break',
        formatter: params => `${params.name}: ${params.value}\n占比: ${params.percent}%`,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};
store.watch(
  state => state.global.setting.sideTheme,
  newVal => (sideTheme = newVal),
);
const getCurrentThemeStyle = sideTheme => {
  return {
    tooltip: {
      backgroundColor: sideTheme === 'theme-dark' ? 'rgba(47,59,96,0.94)' : '#fff',
      borderColor: sideTheme === 'theme-dark' ? '#245288' : '#d5d5d5', //设置边框颜色
      textStyle: { color: sideTheme === 'theme-dark' ? '#f5f5f5' : '#303133' },
    },
    legend: {
      textStyle: { color: sideTheme === 'theme-dark' ? '#c0c4cc' : '#606266' },
    },
    title: {
      textStyle: { color: sideTheme === 'theme-dark' ? '#f5f5f5' : '#303133' },
    },
    label: {
      color: sideTheme === 'theme-dark' ? '#c0c4cc' : '#606266',
    },
  };
};
export default () => merge({}, options, getCurrentThemeStyle(sideTheme));
